<template>
  <div>
    <List :nameList="nameList">
      <template v-slot:header>
        <h2>学生列表</h2>
      </template>
      <hr/>
      <template v-slot:content="{nameList}">
        <li v-for="item in nameList" :key="item.id" :style="{background:item.age>20?'skyblue':''}">
          {{item.name}} -- {{item.age}}
        </li>
      </template>
    </List>
  </div>
</template>


<script>
import List from "@/components/List";
export default {
  name:"App",
  components: {List},
  data(){
    return{
      nameList:[
        {id:"001",name:"张三",age:12},
        {id:"002",name:"李四",age:62},
        {id:"003",name:"王五",age:52},
        {id:"004",name:"赵六",age:42},
        {id:"005",name:"颜七",age:32},
        {id:"006",name:"老八",age:22},
      ]
    }
  }
}
</script>


<style></style>